<template>
  <ElPupBox :pup="pup" :json="json" :isFoot="isFoot" :isBg="isBg" @closeBtn="closeBtn">
    <template #footR v-if="(btns && btns.length > 0) || (pup.btns && pup.btns.length > 0) || $slots.footR">
      <div class="list-r-8">
        <template v-for="item in btns || pup.btns">
          <el-button :type="item.type" @click="saveBtn(item)" v-permission="item.permission" :loading="pup.loading"
            v-if="!item.hidden">{{
              typeof item.title === 'function' ? item.title(pup.form) : item.title
            }}</el-button>
        </template>
        <slot name="footR" />
      </div>
    </template>
    <template #default>
      <el-form :model="pup.form" class="list-b-16" label-width="auto" ref="ruleFormRef">
        <el-form-item label=" " class="fullNone"></el-form-item>
        <slot :form="pup.form" />
      </el-form>
    </template>
  </ElPupBox>
</template>
<script setup lang="ts">
import { watch } from 'vue';
const { proxy } = getCurrentInstance() as any;
//获取父级数据
const props = withDefaults(
  defineProps<{
    pup?: any;
    json?: any;
    isBg?: boolean;
    btns?: any;
    isFoot?: boolean;
  }>(),
  {
    isFoot: true,
  },
);
watch(() => props.pup?.state, () => {
  if (!props.pup.state) {
    if (formCopy.value && props.pup.form) {
      props.pup.form = JSON.parse(JSON.stringify(formCopy.value))
    }
    props.pup.loading = false
  }
});
const closeBtn = () => {
  emit('closeBtn')
}
const ruleFormRef: any = ref(null);
const formCopy: any = ref(null);
const saveBtn = async (item: any, formEl: any = ruleFormRef.value) => {
  if (!formEl) return;
  await formEl.validate(async (valid: any) => {
    if (valid) {
      _sun();
    }
  });
  function _sun() {
    if (item.click && typeof item.click === 'function') {
      item.click(props.pup, () => {
        resetForm(formEl)
      });
    }
  }
};
const resetForm = (formEl?: any) => {

}
onMounted(() => {
  if (!formCopy.value && props.pup.form) {
    formCopy.value = JSON.parse(JSON.stringify(props.pup.form))
  }
});
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'closeBtn'): void;
  (event: 'saveBtn', pup: any, isClose: boolean): void;
}>();
</script>
<style lang="scss"></style>
